import React, { useState } from 'react';
import { Select, Tag } from 'antd';
import type { SelectProps } from 'antd';
import { httpPost } from '@utils/HttpUtil';

type TagRender = SelectProps['tagRender'];
const knowledgeList = httpPost("/knowledge/getKnowledgeList", {}).data;
const tagList = knowledgeList.map((item:any)=>{
    return {
      value: item.name,
      label: item.name,
    };
})


const options: SelectProps["options"] = tagList;

const tagRender: TagRender = (props) => {
    const { label, closable, onClose } = props;
    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
      event.preventDefault();
      event.stopPropagation();
    };
    var filterList = knowledgeList.filter((item:any)=>item.name === label);
    var item = filterList[0];
    if(item !== undefined){
        return (
            <Tag
              color={item.color}
              onMouseDown={onPreventMouseDown}
              closable={closable}
              onClose={onClose}
            >
              {item.name}
            </Tag>
          );
    }else{
      return <></>;
    }
};


const SelectKnowledgeList = ({ onChange }: any) => {

  const [currentValue, setCurrentValue] = useState([]);

  const handleSelected = (value: any) => {
    setCurrentValue(value);
    onChange(value);
  };

  return (
    <div>
      <Select
        mode="multiple"
        tagRender={tagRender}
        defaultValue={currentValue}
        options={options}
        onChange={handleSelected}
      />
    </div>
  );
};

export default SelectKnowledgeList;